<template>
    <div class="com-price">
        <span :class="prefixClass" v-bind:style="prefixStyle">
            {{prefixNum}}
        </span>
        <span class="point" v-bind:style="prefixStyle">.</span>
        <span :class="suffixClass" v-bind:style="suffixStyle">
            {{suffixNum}}
        </span>
    </div>
</template>

<script>
    export default {
        name: "price",
        props:{
            value : {
                type : Number,
                default : 0
            },
            prefixClass:{
                type : String,
                default : "prefixClass"
            },
            suffixClass:{
                type : String,
                default : "suffixClass"
            },
            prefixStyle:{
                type : Object,
                default : ()=>{
                    return {
                        color: '#D82D11',
                        fontSize: '13px'
                    }
                }
            },
            pointStyle:{
                type : Object,
                default : ()=>{
                    return {
                        color: 'red',
                        fontSize: '12px'
                    }
                }
            },
            suffixStyle:{
                type : Object,
                default : ()=>{
                    return {
                        color: '#D82D11',
                        fontSize: '12px'
                    }
                }
            }

        },
        computed: {
            prefixNum:function(){
                let temp = this.value.toString().split(".");
                return temp[0];
            },
            suffixNum:function(){
                let temp = this.value.toString().split(".");
                if(!temp[1]){
                    return temp[1] = "00";
                }
                return temp[1];
            }
        }
    }
</script>

<style lang="scss" scoped>
    .com-price{
        display: inline-block;
        color:var(--red-color);
        .prefixClass{
            display: inline-block;
            color: var(--red-color);
            font-size: 16px;
        }
        .point{
            color: var(--red-color);
        }
        .suffixClass{
            color: var(--red-color);
            font-size: 12px;
            display: inline-block;
        }
    }

</style>
